<template>
	<view class="diy-groupbuy" v-if="list.length > 0" :data-theme="themeStyle" :style="{ backgroundColor: value.backgroundColor, padding: value.padding * 2 + 'rpx 0' }">
		<view hover-class="none" @click="$util.redirectTo('/promotionpages/groupbuy/list/list')" class="diy-groupbuy-top" v-if="value.list">
			<view class="seckill-title">
				<image class="left-img" :src="$util.img(value.list.imageUrl)" v-if="value.list.imageUrl"></image>
				<text class="seckill-title-name" :style="{ color: value.titleTextColor}">{{ value.list.title }}</text>
			</view>
			<view class="seckill-more" :style="{ color: value.moreTextColor }">{{ value.listMore.title }}</view>
		</view>
		<ns-goods-item-col :value="list" @toDetail="toDetail" type="groupbuy"></ns-goods-item-col>
	</view>
</template>

<script>
import nsGoodsItemCol from '@/components/ns-goods-item/ns-goods-item-col.vue';
import globalConfig from '@/common/js/golbalConfig.js';
export default {
	name: 'diy-groupbuy',
	components: {
		nsGoodsItemCol
	},
	props: {
		value: {
			type: Object
		}
	},
	mixins: [globalConfig],
	data() {
		return {
			list: []
		};
	},
	created() {
		this.getData();
	},
	methods: {
		getData() {
			var data = {
				page: 1,
				page_size: this.value.goodsCount
			};
			if (this.value.sources == 'diy') {
				data.goods_id_arr = this.value.goodsId.toString();
			}
			this.$api.sendRequest({
				url: '/groupbuy/api/goods/page',
				data: data,
				success: res => {
					if (res.code == 0) {
						this.list = res.data.list;
					}
				}
			});
		},
		toDetail(e) {
			this.$util.redirectTo('/promotionpages/groupbuy/detail/detail', {
				id: e.groupbuy_id
			});
		},
		imageError(index) {
			this.list[index].sku_image = this.$util.getDefaultImage().default_goods_img;
			this.$forceUpdate();
		}
	}
};
</script>

<style lang="scss">
.diy-groupbuy {
	width: 100%;
	// padding: $ns-padding 0;
	box-sizing: border-box;
	// background: #f7f7f7;
}

.diy-groupbuy-top {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0 0 $ns-padding;
	box-sizing: border-box;

	.seckill-title {
		display: flex;
		align-items: center;

		.left-img {
			width: 50rpx;
			height: 50rpx;
			margin-right: 10rpx;
		}
		.seckill-title-name {
			font-size: $ns-font-size-lg;
			font-weight: bold;
			margin-right: $ns-margin;
		}

		.seckill-title-time {
			font-size: $ns-font-size-base;
		}
	}

	.seckill-more {
		font-size: $ns-font-size-base;
		color: #858585;
		margin-right: 20rpx;
	}

	.seckill-more::after {
		font-family: 'iconfont';
		content: '\e6a3';
		font-size: $ns-font-size-lg;
		line-height: 1;
		position: relative;
		top: 0;
		margin-left: 2px;
	}
}
</style>
